<!--
  Generated template for the RecordCarPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>通行记录</ion-title>
  </ion-navbar>

</ion-header>

<!-- style="display:none;" -->
<ion-content (ionScroll)="scrollHandler($event)" (ionScrollEnd)="ionScrollEnd($event)">
  <!-- <div id="record-car" #recordCar > -->
    <div class="record-img" #recordImg style="display:block;">
        <div class="record-time-span">
            <div class="time-title">
                出站时间段
            </div> <div class="time-span">
                <span class="time">
                    <date-picker (selectedDefaultDateFromChild)="selectedDefaultDateFromChild($event)" [defaultDate]="defaultDate" #datePicker1></date-picker>
                </span> 
                <span class="text">至</span> <span class="time">
                    <date-picker (selectedDefaultDateFromChild)="selectedDefaultDateFromChild2($event)" [defaultDate]="defaultDate2" #datePicker2></date-picker>
                </span>
            </div> 
            <div class="btn">
                <button ion-button block (tap)="_searchList()" [color]="btnDisable===true?'light':''">查询</button>
          </div>
        </div>
    </div>

    <ion-list >
            <ion-item class="record-list" *ngFor="let item of recordList">
                <div class="record-list-title">
                    <div>通行费用  </div>
                    <div class="cost">￥{{item.consumeMoney}}</div>
                </div> <div class="record-list-info">
                    <div class="in-out-list">
                        <div class="go-site">进站名：<span>{{item.inStation}}</span></div>
                        <div class="go-time">{{item.inTime | formateDate}}</div>
                    </div> <div class="in-out-list">
                        <div class="go-site">出站名：<span>{{item.outStation}}</span></div> <div class="go-time">{{item.outTime | formateDate}}</div>
                    </div>
                </div>
            </ion-item>
        </ion-list>

        <div class="dataTipsBtnBox" *ngIf="recordList.length>0&&!hasMore">
                <div class="seeMore noMore"><span>没有更多记录了</span>
                </div>
            </div> 

    <div class="record-list-box-wrap" [hidden]="!isShowNoListTips">
        <div id="record-list" >
            <div class="wrapper" #wrapper >
                <div class="record-list-box">
                    
                     
                    <div class="tips-status-box" style="background:none;" [hidden]="!isShowNoListTips">
                        <div class="ptc" style="margin-top:0;">
                            <div class="tips-status">
                                <p class="statusImg no-record"></p> <p class="desc">没有记录～</p> 
                            </div>
                        </div>
                      </div>
                  </div>
            </div>


        </div>
        <div class="ajaxLoaing" style="display: none;">
            <div class="loading" style="display: none;">
                <img width="24" height="24" src="">
                <p class="desc"></p>
            </div>
        </div>
    </div>
    <div class="back-btn" *ngIf="backTopShow" (tap)="scrollToTop()"></div>
    <div class="mask" *ngIf="isLoadingMore"></div>
    <custom-toast #customToast></custom-toast>
    

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)" 
    threshold="100px" *ngIf="this.hasMore">
      <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="正在加载更多..."></ion-infinite-scroll-content>
    </ion-infinite-scroll>

  <!-- </div> -->
</ion-content>
